import React, { Component ,Fragment } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import Select from 'react-select';
import "./index.scss"
import face from '../../assets/img/my-instaction-img.jpg'
import headerImg from '../../assets/img/wd_blue.png'
import { BASE_URL, QN } from '../../utils/requestPath';
import moment from 'moment';
import { InputItem } from 'antd-mobile';
import requestAxios from '../../utils/myaxios'
class Index extends Component {
    
  
  constructor(props){
    super(props)
    //this.state = {};
    //this.scrollTop = 0;
    this.handleScroll = this.handleScroll.bind(this)

  }


  state = {
    reSet:"<",
    communitButton:false,
    inputItem:"",
    communityList:[],
    communityComment:[],
    commentValueId:{},
    marginTop:400
  }
    

    escOnClick=()=>{
      this.props.history.push("/navigator")
    }

    componentDidMount(){
      this.requestCommunityList()

      window.addEventListener('scroll', this.handleScroll);
    }

    handleScroll=async()=>{
      //console.log(window.scrollY)
      //let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
      //let scrollTop  = await this.refs.bodyBox.scrollTop;  //滚动条滚动高度
      //console.log(scrollTop)
      //let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度
      await this.setState({
        marginTop:500 + parseInt(0)
      })
      //console.log("clientHeight",clientHeight)
      //console.log("scrollTop",scrollTop)
      //console.log("scrollHeight",scrollHeight)
    }

    

    requestCommunityList=()=>{
      requestAxios.post(BASE_URL+"/api/community/posts/find/all/0/0").then(res=>{
        console.log(res)
        if(res.data.flag){
           this.setState({
             communityList:res.data.data
           })
        }
      })
    }

    communitClickPosts=async(value)=>{
      //alert("点解.........")
      await this.setState({
        commentValueId:value
      })
      console.log(value)
      const commentPostsId = await value.id;
      const communityComment = {commentPostsId};
      await requestAxios.post(BASE_URL+"/api/community/comment/find/all/0/0",communityComment).then(res=>{
        if(res.data.flag){
          this.setState({
            communityComment:res.data.data
          })
          console.log(res.data.data)
        }
      })
      
      await this.setState({
        communitButton:true
      })
      
    }

    inputItemChange=(value)=>{
      console.log(value)
      this.setState({
        inputItem:value
      })
    }

    clearOnClick=()=>{
      this.setState({
        communitButton:false,
        communityComment:[],
        commentValueId:{}
      })

    }

    communityPosts=()=>{
      this.props.history.push("communityPosts?id="+234567)
    }

    //发送评论
    sendClick=async()=>{
      //获取 所属帖子 id
      const commentPostsId =await this.state.commentValueId.id;
      
      //获取 所属帖子 人id
      const userId = await this.state.commentValueId.userId 

      const userInfo =await localStorage.getItem("userInfoIns");
      const userInfoIns = JSON.parse(userInfo) || {}
      //获取发送人 id  
      const sendUserId = userInfoIns.id
      //获取评论内容.
      const commentDesc = this.state.inputItem
      const commentNew = {sendUserId,commentDesc,commentPostsId,userId}
      
      await requestAxios.post(BASE_URL+"/api/community/comment/add",commentNew).then(res=>{
         console.log(res)
         if(res.data.flag){
            this.setState({
              inputItem:""
            })
            this.clearOnClick()
            this.requestCommunityList()
         }
      })

    }

    onClickCommunityDetail=(value)=>{
      //alert("sdfsdf")
      //this.props.history.push("/communityDetail?id="+value.id)

    }

      render() {
        const {reSet} = this.state
        return (
            <div onScroll={this.handleScroll} className="main-community-app" ref="bodyBox">
              {/* 头部 */}
                 <header className="main-community-header-exchangerecord">
                  <div className="main-community-header-con" onClick={this.escOnClick}>
                      <span className="main-community-header-con-span-one">{reSet}</span>
                      <span  className="main-community-header-con-span-two">返回</span>
                  </div>
                  <h4>
                      社区评论
                  </h4>
                  <h5 style={{color:"#fff"}}>s</h5>
              </header>
              {/* main中间部分 */}
             {this.state.communityList.map((value,index)=>{
               return (
                    <div 
                    key={index}
                    
                    className="main-community-content">
                    {/* 头像,昵称,描述 */}
                    <div onClick={this.onClickCommunityDetail.bind(this,value)} className="main-community-content-header">
                        <img src={value.headerImg}>
                        </img>
                        <div className="main-community-content-right">
                            <div className="main-community-content-title">
                              {value.userName}
                            </div>
                            <div className="main-community-content-desc">
                              {value.comment}
                            </div>
                        </div>
                    </div>

                    {/* 图片 */}
                    <div className="main-community-content-images">
                      {value.commentImg.split(",").map(value1=>{
                        return (
                          value1?<img src={value1}></img>:""
                        )
                      })}
                    </div>
                      {/* 评论..... */}
                  <div className="main-community-button">  
                      <div className="main-communit-content-posts"
                        onClick={this.communitClickPosts.bind(this,value)}
                      >
                      <img src={`${QN+"pl.png"}`}></img>
                        <h3>{value.commentCount !== null?value.commentCount:0}</h3>
                      </div>

                      <div className="main-communit-content-right">
                        <h3>{moment(new Date(parseInt(value.createTime))).format("MM-DD hh:mm")}</h3>
                      </div>
                  </div>
                {/* 评论统计结束 */}
                </div>
               )
             })}
              
            {/* 底部model弹出框... */}
            {this.state.communitButton?
                <div className="main-communit-footer-app"> <div className="main-communit-content-button-footer">
                <h2>客服统一回复</h2>
                <div className="main-communit-clear"> <h5 onClick={this.clearOnClick}>×</h5> </div>
                 {/* 回复1...... */}
                 {this.state.communityComment.map((vv,ii)=>{
                   return (
                      <div key={ii} className="main-communit-content-button-bot">
                          <div className="main-communit-content-button-posts">
                                <div className="main-comunity-content-nickName-images">
                                  <img src={vv.headerImg}></img>
                                  <div className="main-community-content-button-tit">
                                    <div className="main-community-content-button-title">
                                        {vv.userName}
                                    </div>

                                    <div className="main-community-content-button-desc">
                                        {vv.commentDesc}
                                    </div>
                                  </div>  
                                </div>
                                
                          </div>

                          <h3>{moment(new Date(parseInt(vv.createTime))).format("MM-DD hh:mm")}</h3>

                      </div>
                   )
                 })}
                  {/* 回复1结束..... */}
                 
                  <div className="main-communit-content-button-input">
                    <div className="main-communit-input-item"><InputItem 
                      onChange={this.inputItemChange}
                    value={this.state.inputItem} placeholder="请输入您要评论的信息"></InputItem></div>
                    <div
                    onClick={this.sendClick}
                    className="main-communit-input-send-message">发送</div>
                  </div>  
          </div> </div>
                
            :""}
            {/* 底部model弹出框结束 */}
            {this.state.communitButton?<div
                className="main-coummunity-button-start"
                ></div> :""}
            
             <div 
             onClick={this.communityPosts}
             id="main-community-start-bottom-post"
              style={{
                //width:76,
                //height:76,
                //background:"linear-gradient(-111deg,red,yellow)",
                //position:"fixed",
              //bottom:123,
              //marginLeft:256,
              //borderRadius:76,
              //fontSize:20,
              //color:"#002",
              //lineHeight:76,
              
            }
            
          }
             >
               <h2 id="main-community-start-bottom" style={{fontSize:20,color:"#fff",width:"100%",alignItems:"center",textAlign:"center"}}>发帖</h2>
             </div>
            </div>
        );
      }
}
export default withRouter(Index)
